<template>
  <div class="content-container">
    <!-- 搜索栏 -->
    <div ref="adminContentSearch" class="content-search-wrap">
      <el-form 
      	class="content-search"
      	inline
      	size="mini"
      >
        <el-form-item label="姓名">
          <el-input v-model="account" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="createTime"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
    		  <el-button size="mini" type="primary" @click="search">搜索</el-button>
    		  <el-button size="mini" type="danger">清空</el-button>
  		</el-form-item>
      </el-form>
    </div>
    <!-- 工具栏 -->
    <div ref="adminContentTools" class="content-tools-wrap hidden">
      	<div class="tools-left f-l">
      		
      		<el-button-group>
			       <el-button size="mini" type="primary" icon="el-icon-edit">新增</el-button>
			   </el-button-group>

      	</div>
      	<div class="tools-right f-r">
      		
			      <el-tooltip effect="dark" content="刷新" placement="top">
              <el-button size="mini" type="primary" icon="el-icon-refresh" circle></el-button>
            </el-tooltip>
			
      	</div>
    </div>
    <!-- 内容栏--表格 -->
    <div class="content-table-wrap" v-loading="loading" loading-type="chrome-circle-turn">
    	<el-table
        v-if="dataList"
        border
    		:data="dataList"
        max-height="350"
    		style="width: 100%"
    	>
    		<el-table-column
		      type="selection"
		      width="55">
		    </el-table-column>

    		<el-table-column
          fixed
		      type="index">
		    </el-table-column>

        <el-table-column
		      fixed
		      prop="name"
		      label="姓名"
		      width="100">
		    </el-table-column>

    		<el-table-column
		      prop="account"
		      label="用户名"
		      width="100">
		    </el-table-column>

        <el-table-column
		      prop="phone"
		      label="手机号码"
		      width="100">
		    </el-table-column>

        <el-table-column
		      prop="birthday"
		      label="生日"
		      width="150">
		    </el-table-column>

        <el-table-column
		      prop="sex"
		      label="性别"
		      width="50">
		    </el-table-column>

        <el-table-column
		      label="认证类型"
          prop="authType"
		      width="100">
          
		    </el-table-column>

        <el-table-column
		      prop="creditCode"
		      label="信用代码/注册号"
		      width="100">
		    </el-table-column>

        <el-table-column
		      prop="enterprise"
		      label="企业"
		      width="100">
		    </el-table-column>

        <el-table-column
		      prop="idNo"
		      label="身份证"
		      width="100">
		    </el-table-column>

        <el-table-column
		      prop="identity"
		      label="身份"
		      width="100">
		    </el-table-column>

        <el-table-column
		      prop="managePlace"
		      label="经营地"
		      width="100">
		    </el-table-column>

        <el-table-column
		      prop="managerName"
		      label="经营者或者法人代表"
		      width="100">
		    </el-table-column>

        <el-table-column
		      prop="personSignature"
		      label="个人签名"
		      width="100">
		    </el-table-column>

        <el-table-column
		      prop="birthPlace"
		      label="出生地"
		      width="100">
		    </el-table-column>

        <el-table-column
		      prop="email"
		      label="邮箱"
		      width="150">
		    </el-table-column>

        <el-table-column
		      label="营业执照照片"
		      width="100">
          <template slot-scope="scope">
              <span v-if="!scope.row.businessLicense">暂无照片</span>
              <span class="imgStyle el-icon-picture" v-else @click="showImg(scope.row.businessLicense)">查看照片</span>
          </template>
		    </el-table-column>

        <el-table-column
		      label="企业授权书照片"
		      width="100">
          <template slot-scope="scope">
              <span v-if="!scope.row.enterpriseAuthLetterImage">暂无照片</span>
              <span class="imgStyle el-icon-picture" v-else @click="showImg(scope.row.enterpriseAuthLetterImage)">查看照片</span>
          </template>
		    </el-table-column>

        <el-table-column
		      label="手持身份证照片"
		      width="100">
          <template slot-scope="scope">
              <span v-if="!scope.row.holdIdImage">暂无照片</span>
              <span class="imgStyle el-icon-picture" v-else @click="showImg(scope.row.holdIdImage)">查看照片</span>
          </template>
		    </el-table-column>

        <el-table-column
		      label="身份证正面照片"
		      width="100">
          <template slot-scope="scope">
              <span v-if="!scope.row.idImage1">暂无照片</span>
              <span class="imgStyle el-icon-picture" v-else @click="showImg(scope.row.idImage1)">查看照片</span>
          </template>
		    </el-table-column>

        <el-table-column
		      label="身份证反面照片"
		      width="100">
          <template slot-scope="scope">
              <span v-if="!scope.row.idImage2">暂无照片</span>
              <span class="imgStyle el-icon-picture" v-else @click="showImg(scope.row.idImage2)">查看照片</span>
          </template>
		    </el-table-column>

        <el-table-column
		      prop="createTime"
		      label="创建时间"
		      width="150">
		    </el-table-column>

        <el-table-column
		      prop="updateTime"
		      label="更新时间"
		      width="150">
		    </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="del">删除</el-button>
          </template>
        </el-table-column>

    	</el-table> 

      <!-- 分页 -->
      <div ref="adminContentPagination" class="content-pagination-wrap">
        <el-pagination
            background
            :current-page="page.currentPage"
            :page-sizes="page.pageSizes"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
        </el-pagination>
      </div> 

    </div>
    <!-- 编辑弹窗 -->
    <edit-member-dialog
      :visible="editDialogVisible"
    	:form.sync='editForm'
    	@cancel="editDialogCancel"
      @confirm="editDialogConfirm"
    >

    </edit-member-dialog>

    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      align="center"
      :before-close="handleClose">
      
      <img style="max-width: 80%;" :src="curImgUrl">
      
    </el-dialog>
  </div>
</template>

<script>
import { baseUrl } from '@/config/env';
import { mapGetters } from 'vuex'
import EditMemberDialog from "@/components/Dialog/editMemberDialog";
import {
  getList,
  getDept,
  remove,
  update,
  add,
} from "@/api/admin/dept";

import { getRolesTree } from "@/api/admin/roles";
import adminMixins from "@/mixins/admin"

import { getMenberList, editMember } from "@/api/admin/memberManage"
export default {
  name: 'memberManage',
  mixins:[adminMixins],
  components:{
  	EditMemberDialog
  },
  computed: {
    ...mapGetters([
      'permission',
      'userInfo'
    ])
  },
  data(){
  	return{
      curImgUrl: '',
      createTime: '',
      dialogVisible: false,
      baseUrl: baseUrl,
      dataList: [],
      loading: false,
      account: '',
      createTime: [],
      page: {
        currentPage: 1,
        total: 0,
        pageSizes: [10, 20, 30, 40, 50, 100]
      },
      editDialogVisible: false,
      editForm: {}
  	}
  },

  mounted(){
    this.getList()
  },
  methods:{
    // 查看照片
    showImg (url) {
      this.dialogVisible = true;
      this.curImgUrl = baseUrl+'/rest/common/preview/' + url;
    },
    handleClose () {
      this.dialogVisible = false;
      this.curImgUrl ='';
    },    
    // 获取数据
    getList () {
        getMenberList().then(res => {
          res.data.data.records.forEach(item => {
            item.authType = this.getAuthType(item.authType);
          })
          this.dataList = res.data.data.records;
        })
    },
    //企业认证类型
    getAuthType (type) {
      let TYPE;
      switch (type) {
        case '1':
          TYPE = '个人';
          break;
        case '2':
          TYPE = '企业';
          break;
        case '3':
          TYPE = '个体户';
          break;
        default:
          TYPE = '';
          break;
      }
      return TYPE;
    },
    setAuthType (type) {
      console.log(type)
      let TYPE;
      switch (type) {
        case '个人':
          TYPE = '1';
          break;
        case '企业':
          TYPE = '2';
          break;
        case '个体户':
          TYPE = '3';
          break;
        case '':
          TYPE = '';
          break;
        default:
          TYPE = type;
          break;
      }
      return TYPE;
    },
    // 编辑数据
    edit (data) {
      this.editDialogVisible = true;
      this.editForm = data;
      console.log(this.editForm)
    },
    // 删除数据
    del () {

    },
    editDialogCancel () {
      this.editDialogVisible = false;
      this.editForm = {};
    },
    editDialogConfirm (from) {
      //重置authType
      from.data.authType = this.setAuthType(from.data.authType);
      editMember(from.data).then(res => {
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        this.getList()
        console.log(res)
      })
      .catch(err => {
        this.$message({
          type: 'err',
          message: '修改失败'
        })
        console.log(err)
      })
    },
    search () {
      let data = {
        name: this.account,
        beginTime: this.createTime[0],
        endTime: this.createTime[1]
      }
      getMenberList(data).then(res => {
        this.dataList = res.data.data.records;
      })
      .catch(err => {
        this.$message({
          type: 'err',
          message: err.message
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  &-container {

  }
  /***搜索栏***/
  &-search-wrap{
    padding: 15px;
    border-bottom: 1px solid #E8EBEE;
  }
  /***工具栏***/
  &-tools-wrap{
    padding: 15px;
  }
  /***内容栏***/
  &-table-wrap{
    position: relative;
    padding: 15px;
  }
  /***分页***/
  &-pagination-wrap{
    text-align: right;
  	padding-top: 15px;
  }
}
.imgStyle {
  color: #409EFF;
  cursor: pointer;
}
</style>
